import { Component } from '@angular/core';
import {
  asyncScheduler,
  concatMap,
  delay,
  forkJoin,
  interval,
  map,
  observeOn,
  of,
  queueScheduler,
  subscribeOn,
  take,
  takeWhile,
  tap,
  zip,
} from 'rxjs';
import { StreamService } from './stream.service';

@Component({
  selector: 'app-stream',
  templateUrl: './stream.component.html',
  styleUrls: ['./stream.component.less'],
})
export class StreamComponent {
  sentences$ = this.streamService.sentences$;
  greetings$ = this.streamService.greetings$;
  colors$ = this.streamService.colors$;

  sentences: string[] = [];
  greetings: string[] = [];
  colors: string[] = [];

  constructor(private streamService: StreamService) {
    this.sentences$.subscribe((sentence) => {
      this.sentences.push(sentence);
    });
    this.greetings$.subscribe((greeting) => {
      this.greetings.push(greeting);
    });
    this.colors$
      .pipe(
        // subscribeOn(queueScheduler), // 将值按顺序排队
        // observeOn(asyncScheduler, 2000) // 每隔一秒输出一个值
        concatMap((value) => of(value).pipe(delay(2000)))
      )
      .subscribe((color) => {
        this.colors.push(color);
        if (this.colors.length > 10) this.colors.shift();
      });
  }
}
